<template>
	<view class="withdraw-container">
		<!-- 顶部标题区域 -->
		<view class="header">
			<view class="tab-item active">提现类型</view>
			<view class="tab-item">奖励金钱包</view>
		</view>
		
		<!-- 账户金额选择区域 -->
		<view class="amount-section">
			<view class="section-title">账户金额:</view>
			<view class="amount-options">
				<view 
					v-for="(amount, index) in amountOptions" 
					:key="index" 
					class="amount-option" 
					:class="{ 'active': selectedAmount === amount }"
					@click="selectAmount(amount)"
				>
					{{ amount }}
				</view>
			</view>
			<view class="min-amount-tip">本次申请满 <text style="color: #FF0000;margin: 0 12rpx;">{{ minAmount }}</text>元即可提现</view>
		</view>
		
		<!-- 银行卡信息区域 -->
		<view class="bank-info">
			<view class="info-item">
				<view class="item-label">银行卡号</view>
				<input 
					class="item-input" 
					type="text" 
					v-model="bankCardNumber" 
					placeholder="请输入银行卡号" 
				/>
			</view>
			
			<view class="info-item">
				<view class="item-label">开户行</view>
				<input 
					class="item-input" 
					type="text" 
					v-model="bankName" 
					placeholder="请输入开户行" 
				/>
			</view>
			
			<view class="info-item">
				<view class="item-label">姓名</view>
				<input 
					class="item-input" 
					type="text" 
					v-model="userName" 
					placeholder="请输入姓名" 
				/>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitWithdraw">立即提现</view>
		
		<!-- 提现记录链接 -->
		<view class="record-link" @click="navigateToRecord">提现记录</view>
	</view>
</template>

<script>
/**
 * 提现页面
 * @description 用户申请提现的页面
 */
export default {
	data() {
		return {
			/**
			 * 金额选项
			 * @type {Array}
			 */
			amountOptions: [20, 50, 100, 200],
			
			/**
			 * 当前选中的金额
			 * @type {Number}
			 */
			selectedAmount: 20,
			
			/**
			 * 最低提现金额
			 * @type {Number}
			 */
			minAmount: 20,
			
			/**
			 * 银行卡号
			 * @type {String}
			 */
			bankCardNumber: '',
			
			/**
			 * 开户行
			 * @type {String}
			 */
			bankName: '',
			
			/**
			 * 用户姓名
			 * @type {String}
			 */
			userName: ''
		};
	},
	methods: {
		/**
		 * 选择提现金额
		 * @param {Number} amount - 提现金额
		 */
		selectAmount(amount) {
			this.selectedAmount = amount;
		},
		
		/**
		 * 提交提现申请
		 */
		submitWithdraw() {
			// 表单验证
			if (!this.bankCardNumber.trim()) {
				uni.showToast({
					title: '请输入银行卡号',
					icon: 'none'
				});
				return;
			}
			
			if (!this.bankName.trim()) {
				uni.showToast({
					title: '请输入开户行',
					icon: 'none'
				});
				return;
			}
			
			if (!this.userName.trim()) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				return;
			}
			
			// 显示加载中
			uni.showLoading({
				title: '提交中...'
			});
			
			// 模拟提交
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '提现申请已提交',
					icon: 'success',
					duration: 2000,
					success: () => {
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					}
				});
			}, 1500);
		},
		
		/**
		 * 跳转到提现记录页面
		 */
		navigateToRecord() {
			uni.showToast({
				title: '暂未开通',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.withdraw-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 30rpx;
	
	// 顶部标题区域
	.header {
		display: flex;
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		.tab-item {
			font-size: 30rpx;
			color: #333;
			position: relative;
			font-weight: 400;
			&.active {
				color: #333;
				font-weight: bold;
			}
		}
	}
	
	// 账户金额选择区域
	.amount-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.amount-options {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-bottom: 20rpx;
			
			.amount-option {
				width: calc(32% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				border: 1rpx solid #E7E7E7;
				&.active {
					background-color: #529AEE;
					color: #fff;
					border: none;
				}
			}
		}
		
		.min-amount-tip {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	// 银行卡信息区域
	.bank-info {
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		.info-item {
			margin-bottom: 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			border-radius: 10rpx;
			padding: 20rpx 0;
			padding-left:30rpx;
			&:last-child {
				margin-bottom: 0;
			}
			
			.item-label {
				width: 160rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				
			}
			
			.item-input {
				flex: 1;
				height: 60rpx;
				// background-color: red;
				border-radius: 10rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	
	// 提交按钮
	.submit-btn {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #529AEE;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 45rpx;
		margin-bottom: 30rpx;
		margin-top: 180rpx;
	}
	
	// 提现记录链接
	.record-link {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}
}
</style>
